<template>
  <!--清洗消毒列表-->
  <div class="database">
    <div class="content-box">
      <div class="bar-box">
        <div class="view-header"><div>
          <span>项目年度统计</span>
        </div>
          <div>
            <a-select v-model="selectYear" @change="getColumnByYear" default-value="lucy" style="width: 100px" >
              <a-select-option v-for="item in yearList" :key="item" :value="item">{{item}}</a-select-option>
            </a-select>
          </div>
        </div>
        <div class="view">
          <div id="column-echarts"></div>
        </div>
      </div>
      <div class="map-box">
        <div class="view-header">
          <div>
            <span>项目区域位置</span>
          </div>
        </div>
        <div class="view">
          <GlobalMap :mapData="mapData" :position="position" :zoom="zoom"/>
        </div>
      </div>
    </div>
    <div class="table-box">
      <div class="view-header"><div><span>项目列表汇总</span></div></div>
      <div class="view">
        <div class="table-view-header">
          <a-input-search placeholder="请输入关键字" v-model="query.jydwmc" enter-button @search="query.pageNo=1;getTableList()" />
          <a-radio-group v-model="query.jczt" @change="filterChange" button-style="solid">
            <a-radio-button v-for="item in filterList" :key="item.id" :value="item.id">{{item.title}}</a-radio-button>
          </a-radio-group>
          <a-select v-model="query.city" style="margin-left: 10px;width: 160px" @change="query.pageNo=1;getTableList()" default-value="lucy">
            <a-select-option v-for="item in buttonList" :key="item.code" :value="item.code">{{item.name}}</a-select-option>
          </a-select>
        </div>
        <div class="table-view-table">
          <a-table :columns="columns" :pagination="false" :scroll="{y:'220px'}" :rowKey="(data, index) => index" bordered :data-source="tableList" >
            <template slot="status" slot-scope="record">
              <a-tag v-if="record.jczt==='0'" color="#2db7f5">未检测</a-tag>
              <a-tag v-if="record.jczt==='1'" color="#f50">已过期</a-tag>
              <a-tag v-if="record.jczt==='2'"  color="yellow">即将过期</a-tag>
              <a-tag v-if="record.jczt==='3'"  color="#87d068">已检测</a-tag>
            </template>
            <template slot="action" slot-scope="record">
              <a-button type="link" @click="operate(0,record)" icon="environment" size="small">位置</a-button>
              <a-button type="link" @click="operate(1,record)" icon="read" size="small">详情</a-button>
              <a-button type="link" @click="operate(2,record)" icon="file-search" size="small">历史</a-button>
            </template>
          </a-table>
        </div>
        <div class="table-view-page">
          <span>总数:{{query.total}}条</span>
          <a-pagination v-model="query.pageNo" :total="query.total" @change="pageChange" show-less-items />
        </div>
      </div>
    </div>
    <a-modal v-model="visible" :width="modalType===1?'500px':'1000px'" :footer="null" :title="getModalTitle" >
      <GlobalModal v-if="visible" :type="2" :modalType="modalType" :modalObj="modalObj" />
    </a-modal>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import GlobalModal from './globalModal'
import GlobalMap from './globalMap'
export default {
  name: "detectData",
  data(){
    return{
      columns:[
        {
          title:'经营单位名称',
          dataIndex: 'jddwmc',
          align:'center',
        },
        {
          title:'检测报告时间',
          dataIndex: 'bgsj',
          width:220,
          align:'center',
        },
        {
          title:'省市区',
          dataIndex: 'cityName',
          align:'center',
          width:220,
        },
        {
          title:'地址',
          dataIndex: 'door',
          align:'center',
        },
        {
          title:'状态',
          width:180,
          align:'center',
          scopedSlots: {customRender: 'status'},
        },
        {
          title:'操作',
          width:300,
          align:'center',
          scopedSlots: {customRender: 'action'},
        },
      ],
      tableList:[],
      tableLoad:false,
      filterList:[
        {
          title: '全部',
          id: '-1',
        },
        {
          title: '未检测',
          id: '0',
        },
        {
          title: '已检测',
          id: '3',
        },
        {
          title: '即将过期',
          id: '2',
        },
        {
          title: '已过期',
          id: '1',
        },
      ],
      query:{
        city:'',
        jydwmc:'',
        jczt:'-1',
        pageSize:15,
        pageNo:1,
        total:0,
      },
      yearList:[],
      selectYear:'',
      columnData:[],
      monthList:[],
      modalType:0,
      modalObj:{},
      visible:false,
      position:'南昌',
      zoom:12,
      mapData:[],
      buttonList:[],
    }
  },
  components:{
    GlobalModal,
    GlobalMap,
  },
  computed:{
    getModalTitle(){
      return ['','详情','历史'][this.modalType]
    }
  },
  mounted() {
    this.getTableList()
    this.getSelectList()
    this.getColumnByYear()
    // this.getMapData()
    this.getCity()
  },
  methods:{
    //初始化柱状图
    initColumn(){
      let total = echarts.init(document.getElementById('column-echarts'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.monthList,
          name:'/月份',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'value',
          name:'/个',
        },
        series: [
          {
            name: '卫生检测数量',
            type: 'bar',
            barMaxWidth:20,
            color:'#409eff',
            data: this.columnData,
          },
        ]
      };
      total.setOption(option)
    },
    //初始化部分静态数据
    getSelectList(){
      let nowYear = new Date().getFullYear()
      this.selectYear = nowYear;
      let yearList = [];
      let monthList = [];
      for (let i = 0; i < 6; i++) {
        yearList.unshift(nowYear-i);
      }
      this.yearList = yearList;
      for (let i = 1; i < 13; i++) {
        monthList.push(i+'月')
      }
      this.monthList = monthList;
    },
    //获取柱状图数据
    getColumnByYear(){
      this.$axios.get('report/testReportInfo/map/jzktjcMapYear?year='+this.selectYear)
          .then(res=>{
            let result = res.data.result;
            this.columnData = result;
            this.initColumn()
          })
    },
    //获取列表数据
    getTableList(){
      this.tableLoad = true;
      let { jczt,pageNo,...query } = this.query;
      console.log(query)
      jczt = jczt==='-1'?'':jczt;
      this.$axios.get('report/testReportInfo/map/jzktjcMapList',{
        params:{
          jczt,
          pageNo:pageNo-1,
          ...query,
        },
      }).then(res=>{
        let result = res.data.result;
        this.tableList = result.list;
        this.query.total = result.size
        this.tableLoad = false;
        this.mapData = result.list.map(item=>{
          item.status = item.jczt;
          return item;
        });
      })
    },
    getMapData(){
      this.$axios.get('report/testReportInfo/map/jzktjcMapList',).then(res=>{
        let result = res.data.result;
        this.mapData = result.list.map(item=>{
          item.status = item.jczt;
          return item;
        });
      })
    },
    getCity() {
      this.$axios.get("report/testReportInfo/map/jzktCitySize").then((res) => {
        console.log(res);
        let result = res.data.result;
        let total = 0;
        this.buttonList = [];
        result.forEach((item,index)=>{
          if(result.length!==(index+1)){
            total = total+item.sum*1;
            this.buttonList.push(item)
          }
        });
        this.buttonList.unshift({
          code: "",
          name: "全部省市区",
          sum:total,
        });
      });
    },
    operate(type,row){
      console.log(row)
      if(type===0){
        if(!row.lng || !row.lat){
          this.$message.warning('暂无经纬度信息！');
          this.position = '南昌'
          this.zoom = 12;
        }
        else {
          this.position = {
            lng: row.lng,
            lat: row.lat,
          }
          this.zoom = 17;
        }
        return
      }
      this.visible = true
      this.modalType = type;
      this.modalObj = row;
    },
    filterChange(){
      console.log(this.query.jczt)
      this.query.pageNo = 1;
      this.getTableList()
    },
    pageChange(page){
      this.query.pageNo = page
      this.getTableList()
    }
  }
}
</script>

<style lang="scss" scoped>
.database{
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  >div{
    flex: 1;
  }
  .view-header{
    display: flex;
    >div:first-child{
      font-weight: bolder;
      margin-left: 5px;
      span{
        border-left: #106ec4 3px solid;
        padding-left: 5px;
      }
    }
  }
  .content-box{
    display: flex;
    >div{
      flex: 1;
      margin: 10px;
      border-radius: 5px;
      background-color: white;
      padding: 10px;
    }
  }
  .table-box{
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    background-color: white;
  }
  .table-view-header{
    .ant-input-search{
      width: 260px;
      margin-right: 10px;
    }
  }
  .table-view-page{
    display: flex;
    justify-content: flex-end;
    >span{
      display: flex;
      align-items: center;
      padding: 0 10px;
    }
  }
  .table-view-table{
    flex: 1;
    overflow: auto;
    margin: 10px 0;
  }
  .bar-box,.map-box,.table-box{
    display: flex;
    flex-direction: column;
    .view{
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
  #column-echarts{
    width: 100%;
    height: 100%;
  }
}
</style>